<!-- 供货订单 -->
<template>
  <div>
    <el-card shadow="never">
      <el-form
        :model="searchForm"
        label-width="auto"
        :inline="true"
        size="small"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="订单编号" style="width: 85%">
              <el-input
                v-model="searchForm.orderSn"
                placeholder="请输入订单编号"
                size="small"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="材料编码" style="width: 85%">
              <el-input
                v-model="searchForm.materialCode"
                placeholder="请输入材料编码"
                size="small"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目名称" style="width: 85%">
              <el-select
                v-model="searchForm.projectName"
                clearable
                filterable
                remote
                remote-show-suffix
                placeholder="请选择 项目名称"
                :remote-method="getProjectNameList"
                size="small"
              >
                <el-option
                  v-for="item in projectOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  class="!w-[500px]"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="供应商名称" style="width: 85%">
              <el-input
                v-model="searchForm.supplierName"
                placeholder="请输入供应商名称"
                size="small"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="对帐状态" style="width: 85%">
              <el-select
                v-model="searchForm.projectReconciliationStatus"
                placeholder="请选择对帐状态"
                size="small"
                clearable
              >
                <el-option
                  v-for="item in OptionsDZZT"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结算状态" style="width: 85%">
              <el-select
                v-model="searchForm.settlementStatus"
                placeholder="请选择结算状态"
                size="small"
                clearable
              >
                <el-option
                  v-for="item in OptionsJSZT"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开票状态" style="width: 85%">
              <el-select
                v-model="searchForm.projectInvoiceStatus"
                placeholder="请选择开票状态"
                size="small"
                clearable
              >
                <el-option
                  v-for="item in OptionsKPZT"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="合同编号" style="width: 85%">
              <el-input
                v-model="searchForm.contractNo"
                placeholder="请输入合同编号"
                size="small"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="状态" style="width: 85%">
              <el-select
                v-model="searchForm.auditStatus"
                placeholder="请选择状态"
                size="small"
                clearable
              >
                <el-option
                  v-for="item in OptionsDDZT"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="下单日期" style="width: 85%">
              <el-date-picker
                v-model="searchForm.date"
                type="daterange"
                range-separator="-"
                start-placeholder="开始"
                end-placeholder="结束"
                size="small"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="text-align: right">
            <el-button
              color="#1E3485"
              size="small"
              icon="Download"
              @click="getList('', true)"
            >导出</el-button
            >
            <el-button
              color="#1E3485"
              size="small"
              :icon="Search"
              @click="
                tablePage.currentPage = 1;
                getlist('1');
              "
              >搜索</el-button
            >
            <el-button
              type="default"
              size="small"
              :icon="Delete"
              @click="clearAllFields"
              >清空</el-button
            >
          </el-col></el-row
        >
      </el-form>
      <vxe-table
        border
        min-height="300"
        header-align="center"
        :column-config="{ resizable: true }"
        :row-config="{ isHover: true }"
        :data="TableData"
        size="mini"
        style="margin-top: 1%"
      >
        <vxe-column
          type="seq"
          title="序号"
          fixed="left"
          width="60"
          align="center"
        />
        <vxe-column
          field="orderSn"
          title="订单编号"
          width="200"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="orderName"
          title="订单名称"
          width="200"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="contractName"
          title="合同名称"
          width="200"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="projectName"
          title="项目名称"
          width="200"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="priceType"
          title="价格类型"
          width="100"
          align="center"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="supplierName"
          title="供应商名称"
          width="200"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="projectReconciliationStatus"
          title="对账状态"
          width="100"
          align="center"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="settlementStatus"
          title="结算状态"
          width="100"
          align="center"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="projectInvoiceStatus"
          title="开票状态"
          width="100"
          align="center"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="taxTotalPrice"
          title="含税总价（元）"
          width="150"
          header-align="center"
          align="right"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="receivingTime"
          title="计划收货时间"
          width="150"
          align="center"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="flowSubmitDate"
          title="订单下单时间"
          width="150"
          align="center"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="supplyConfirmDate"
          title="订单确认时间"
          width="150"
          align="center"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field="orderStatus"
          title="状态"
          width="100"
          align="center"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column title="操作" fixed="right" width="200" align="center">
          <!-- 操作列按钮 -->
          <template v-slot="{ row }">
<!--            <vxe-button-->
<!--              v-if="row.orderStatus == '待供应商确认'"-->
<!--              mode="text"-->
<!--              @click="DDQR(row)"-->
<!--              >订单确认</vxe-button-->
<!--            >-->
            <vxe-button
              v-if="
                row.orderStatus == '待供货' ||
                row.orderStatus == '供货中' ||
                row.orderStatus == '供货延迟'
              "
              mode="text"
              @click="saveGH(row)"
              >供货</vxe-button
            >
            <vxe-button
              v-if="
                row.orderStatus == '待供货' ||
                row.orderStatus == '供货中' ||
                row.orderStatus == '供货延迟'
              "
              mode="text"
              @click="
                toDetail(
                  {
                    id: row.id,
                    title: row.orderName,
                    action: 'goGHQD'
                  },
                  'goGHQD'
                )
              "
              >供货清单</vxe-button
            >
            <!-- <vxe-button
                v-if="
                  row.orderStatus == '供货延迟' ||
                  row.orderStatus == '待供货' ||
                  row.orderStatus == '供货中' ||
                  row.orderStatus == '供货完成'
                "
                mode="text"
                @click="dialogVisible = true"
                >供货日志</vxe-button
              > -->
            <vxe-button
              mode="text"
              @click="
                toDetail(
                  {
                    id: row.id,
                    title: row.orderName,
                    action: 'view'
                  },
                  'viewSupplygoodsOrder'
                )
              "
              >查看</vxe-button
            >
          </template>
        </vxe-column>
      </vxe-table>
      <vxe-pager
        v-model:current-page="tablePage.currentPage"
        v-model:page-size="tablePage.pageSize"
        :layouts="[
          'Sizes',
          'PrevJump',
          'PrevPage',
          'Number',
          'NextPage',
          'NextJump',
          'FullJump',
          'Total'
        ]"
        :total="tablePage.total"
        size="small"
        @page-change="handlePageChange"
      />
    </el-card>
    <Supplylog :visible="dialogVisible" @close="closeSales" />
    <orderconfirm
      :yclist="yclist"
      :visible="dialogVisibleconfirm"
      @close="closeconfirm"
    />
    <el-dialog
      v-model="centerDialogVisible"
      title="选择供货类别"
      width="500"
      center
    >
      <template #footer>
        <div class="dialog-footer">
          <el-button :disabled="GHzt !== '待供货'" @click="gogh(1)"
            >单次供货</el-button
          >
          <el-button @click="gogh(2)"> 多次供货 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { Delete, Search, Edit } from "@element-plus/icons-vue";
import { VxePagerEvents } from "vxe-table";
//import { useRouter } from "vue-router";
import { getDict } from "@/api/utils";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  getsupplyOrderOrderlist,
  deletesupplyOrder
} from "@/api/ERP_SupplyManage";

import orderconfirm from "./components/dialog/orderconfirm.vue";
import Supplylog from "./components/dialog/Supplylog.vue";
import { useDetail } from "./components/utils/hooks";
import { getProjectList } from "@/api/ERP_public";
import {http} from "@/utils/http";
import {baseUrlApi} from "@/store/utils";
// 路由跳转
//const router = useRouter();
const { toDetail, router } = useDetail();

// 表单字段
const searchForm = reactive({
  pageIndex: 1,
  pageSize: 10,
  materialCode: "",
  orderSn: "",
  projectName: "",
  supplierName: "",
  projectReconciliationStatus: "",
  settlementStatus: "",
  projectInvoiceStatus: "",
  contractNo: "",
  auditStatus: "",
  date: []
});

// 表格分页配置
const tablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 15
});

onMounted(async () => {
  getDZZT();
  getDDZT();
  getKPZT();
  getJSZT();
  getlist();
});
//字典
const OptionsDZZT = reactive([]);
const OptionsDDZT = reactive([]);
const OptionsKPZT = reactive([]);
const OptionsJSZT = reactive([]);

// 对账状态
const getDZZT = (query?: string) => {
  getDict({
    key: "reconciliationStatus"
  }).then((response: any) => {
    for (const key in response.data) {
      OptionsDZZT.push({
        label: response.data[key],
        value: key
      });
    }
  });
  if (query) {
    setTimeout(() => {
      getDict;
    }, 1500);
  }
};
// 订单状态
const getDDZT = (query?: string) => {
  getDict({
    key: "orderStatus"
  }).then((response: any) => {
    for (const key in response.data) {
      OptionsDDZT.push({
        label: response.data[key],
        value: key
      });
    }
  });
  if (query) {
    setTimeout(() => {
      getDict;
    }, 1500);
  }
};
// 开票状态
const getKPZT = (query?: string) => {
  getDict({
    key: "invoiceStatusStatus"
  }).then((response: any) => {
    for (const key in response.data) {
      OptionsKPZT.push({
        label: response.data[key],
        value: key
      });
    }
  });
  if (query) {
    setTimeout(() => {
      getDict;
    }, 1500);
  }
};
// 结算状态
const getJSZT = (query?: string) => {
  getDict({
    key: "SettlementStatus"
  }).then((response: any) => {
    for (const key in response.data) {
      OptionsJSZT.push({
        label: response.data[key],
        value: key
      });
    }
  });
  if (query) {
    setTimeout(() => {
      getDict;
    }, 1500);
  }
};
// 表格数据
const TableData = ref([]);

// 获取项目订单列表
const getlist = async(query?: string, isExport) => {
  let params: any = {};
  params.contractMethod = 1
  params.materialCode = searchForm.materialCode;
  params.orderSn = searchForm.orderSn;
  params.projectName = searchForm.projectName;
  params.supplierName = searchForm.supplierName;
  params.projectReconciliationStatus = searchForm.projectReconciliationStatus;
  params.settlementStatus = searchForm.settlementStatus;
  params.projectInvoiceStatus = searchForm.projectInvoiceStatus;
  params.contractNo = searchForm.contractNo;
  params.auditStatus = searchForm.auditStatus;
  params.beginDate = searchForm.date == null ? null : searchForm.date[0];
  params.endDate = searchForm.date == null ? null : searchForm.date[1];
  if(isExport) {
    await http.request('get',baseUrlApi("supplyOrder/export/file"), {params})
    return
  }
  if (query === "1") {
    tablePage.currentPage = 1;
  }
  params.pageIndex = tablePage.currentPage;
  params.pageSize = tablePage.pageSize;

  getsupplyOrderOrderlist(params).then((response: any) => {
    response.data.records.forEach(res => {
      if (res.priceType == "0") {
        res.priceType = "锁定";
      } else if (res.priceType == "1") {
        res.priceType = "浮动";
      }
    });
    TableData.value = response.data.records;
    tablePage.total = response.data.totalElements;
  });
  if (query) {
    setTimeout(() => {
      getsupplyOrderOrderlist;
    }, 1500);
  }
};

// 删除项目订单
const del = row => {
  deletesupplyOrder({ id: row.id }).then((response: any) => {
    if (response.code == "200") {
      ElMessage({
        message: "删除成功",
        type: "success"
      });
    }
  });
};

// 清空按钮点击事件
const clearAllFields = () => {
  // 重置SearchForm对象的所有属性
  for (const key in searchForm) {
    if (searchForm.hasOwnProperty(key)) {
      if (key === "signDate") {
        // searchForm[key] = [];
        searchForm[key] = null;
      } else {
        searchForm[key] = "";
      }
    }
  }
};

// 表格分页事件
const handlePageChange: VxePagerEvents.PageChange = ({
  currentPage,
  pageSize
}) => {
  tablePage.currentPage = currentPage;
  tablePage.pageSize = pageSize;
  getlist();
};

//弹窗打开
let dialogVisible = ref(false);
function showSalescontract() {
  dialogVisible.value = true;
}
function closeSales(val: any) {
  dialogVisible.value = false;
}

let dialogVisibleconfirm = ref(false);
function showconfirm() {
  dialogVisibleconfirm.value = true;
}
function closeconfirm(val: any) {
  dialogVisibleconfirm.value = false;
  getlist();
}

const centerDialogVisible = ref(false);
const GHid = ref();
const GHtitle = ref();
const GHzt = ref();
//生成供货清单
async function saveGH(row) {
  centerDialogVisible.value = true;
  GHid.value = row.id;
  GHtitle.value = row.orderName;
  GHzt.value = row.orderStatus;
}
const gogh = ref => {
  if (ref == 1) {
    toDetail(
      {
        id: GHid.value,
        title: GHtitle.value,
        action: "edit1C"
      },
      "editSupplygoodsOrder"
    );
  } else if (ref == 2) {
    toDetail(
      {
        id: GHid.value,
        title: GHtitle.value,
        action: "editDC"
      },
      "editSupplygoodsOrder"
    );
  }
  centerDialogVisible.value = false;
};

const yclist = ref();
const DDQR = row => {
  yclist.value = row;
  showconfirm();
};

// 项目名称选择
let projectOptions = ref([]);
// 项目名称列表下拉框
const getProjectNameList = (query: string) => {
  getProjectList({
    pageIndex: 1,
    pageSize: 10,
    projectName: query
  }).then(response => {
    projectOptions.value = (response as any).data.records.map(item => ({
      label: item.projectName,
      value: item.projectName
    }));
  });
  if (query) {
    setTimeout(() => {
      getProjectList;
    }, 1500);
  }
};
</script>

<style lang="scss" scoped></style>
